<template>
  <el-dialog title="人员配置" :visible.sync="open" :close-on-click-modal="false" width="50%">
    <div class="dialogMain">
      <el-form ref="queryForm" :model="newQueryParams" :inline="true" label-width="80px">
        <el-form-item label="工号" prop="empNo">
          <el-input v-model="newQueryParams.empNo" placeholder="请输入用户工号" clearable size="small" style="width: 160px" />
        </el-form-item>
        <!-- <el-form-item label="用户姓名" prop="userName">
          <el-input v-model="newQueryParams.userName" placeholder="请输入用户姓名" clearable size="small" style="width: 160px" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="tableRef" :data="userList" border @select="changeSelect" @select-all="selectAll">
        <el-table-column type="selection" width="45" align="center" />
        <el-table-column label="工号" align="center" prop="empNo" width="120" :show-overflow-tooltip="true" />
        <el-table-column label="用户姓名" align="center" prop="name" width="120" :show-overflow-tooltip="true" />
        <el-table-column label="部门" align="center" prop="depName" :show-overflow-tooltip="true" />
      </el-table>
      <pagination
        v-show="pageInfo.total > 0"
        :total="pageInfo.total"
        :page.sync="pageInfo.currentPage"
        :limit.sync="pageInfo.pageSize"
        @pagination="getNewList"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { newListUser, doQueryRoleUser, doSaveGroup } from '@/api/system/sysuser'
export default {
  name: 'UserTable',
  data() {
    return {
      open: false,
      userList: [],
      newQueryParams: {
        deptID: '',
        userID: '',
        empNo: null,
        userName: ''
      },
      newQueryParamsCopy: null,
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      // 保存起来的选择项
      saveCheckList: [],
      userGroupId: ''
    }
  },
  created() {
    this.newQueryParamsCopy = JSON.parse(JSON.stringify(this.newQueryParams))
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    },
    getInit(row) {
      this.open = true
      this.userGroupId = row.id
      doQueryRoleUser({ userGroupId: row.id }).then((res) => {
        this.saveCheckList = res.records
        this.getNewList()
      })
    },
    // 当页勾选以及取消
    changeSelect(selection, row) {
      console.log('selection', selection)
      console.log('row', row)
      // 从保存项saveCheckList里面寻找,如果找到了row则删除，如果没找到则添加
      const fitemIndex = this.saveCheckList.findIndex((item) => {
        return item.id == row.id
      })
      if (fitemIndex < 0) {
        this.saveCheckList.push(row)
      } else {
        this.saveCheckList.splice(fitemIndex, 1)
      }
      console.log('this.saveCheckList', this.saveCheckList)
    },
    // 表格全选内容
    selectAll(val) {
      console.log('selectAll', val)
      // 如果为空，则为清除选项状态，此时将table中的所有内容都从saveCheckList移除
      if (val && val.length == 0) {
        this.userList.forEach((row) => {
        // 从保存项saveCheckList里面寻找,如果找到了row则删除，如果没找到则添加
          const fitemIndex = this.saveCheckList.findIndex((item) => {
            return item.id == row.id
          })
          // 找到了就删除掉
          if (fitemIndex >= 0) {
            this.saveCheckList.splice(fitemIndex, 1)
          }
        })
      } else if (val && val.length != 0 && this.saveCheckList.length != 0) {
        // 如果不为空,且this.saveCheckList也不为空则从val里面找
        val.forEach((row) => {
        // 从保存项saveCheckList里面寻找,如果找到了row则删除，如果没找到则添加
          const fitemIndex = this.saveCheckList.findIndex((item) => {
            return item.id == row.id
          })
          // 没找到就push进去
          if (fitemIndex < 0) {
            this.saveCheckList.push(row)
          }
        })
      } else if (val && val.length != 0 && this.saveCheckList.length == 0) {
        val.forEach((row) => {
          this.saveCheckList.push(row)
        })
      }
    },
    // 分页切换时准备表格的选中状态 -- 这个内容必须放在表格数据赋值之后--()
    // tableList 为当前表格的数据
    checkPageStatus(tableList) {
      console.log(tableList, this.saveCheckList)
      tableList.forEach((row) => {
        const findex = this.saveCheckList.findIndex((item) => {
          return item.id == row.id
        })
        if (findex >= 0) {
          this.$nextTick(() => {
            this.$refs['tableRef'].toggleRowSelection(row)
          })
        }
      })
    },
    handleQuery() {
      this.pageInfo.currentPage = 1
      this.getNewList()
    },
    resetQuery() {
      this.newQueryParams = JSON.parse(JSON.stringify(this.newQueryParamsCopy))
      this.handleQuery()
    },
    /** 查询用户列表 */
    getNewList() {
      this.loading = true
      const params = {
        ...this.newQueryParams,
        currentPage: this.pageInfo.currentPage,
        pageSize: this.pageInfo.pageSize
      }
      newListUser(params).then(
        response => {
          this.userList = response.records
          this.checkPageStatus(this.userList)
          this.pageInfo.total = response.total
          this.loading = false
        }
      )
    },
    submitForm() {
      const params = {
        userGroupId: this.userGroupId,
        userIdList: this.saveCheckList.map(item => item.id)
      }
      doSaveGroup(params).then((res) => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.open = false
        this.close()
      })
    }
  }
}
</script>
